<template>
   <el-container class="container">
        <el-header class="header">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <img class="header-img" src="../../assets/img/userimg.jpg">
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-light header-c">
                        <h2>我的管理系统</h2>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple header-r">
                        <a href="#">退出</a>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px" class="aside">
                <el-menu :router="true" class="el-menu-vertical-demo" :default-active="this.$route.path">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>文章管理</span>
                        </template>
                        <el-menu-item index="/list">
                            <i class="el-icon-location"></i>
                            <span>文章列表</span>
                        </el-menu-item>
                        <el-menu-item index="/create">
                            <i class="el-icon-location"></i>
                            <span>添加文章</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="/showlist">
                            <i class="el-icon-location"></i>
                            <span>商品列表</span>
                        </el-menu-item>
                        <el-menu-item index="/createlist">
                            <i class="el-icon-location"></i>
                            <span>添加商品</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main class="main">
                <router-view></router-view>
            </el-main>
        </el-container>
   </el-container>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>
.container{
    height: 100%;
}
.header{
    background-color: #b3c0d1;
}
.header-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 7px;
}
.header-c{
    text-align: center;
}
.header-r{
    line-height: 60px;
    text-align: right;
}
.header-r a{
    text-decoration: none;
    color: #696969;
}
.aside{
    background-color: #d3dce6;
}
.main{
    width: 100%;
    background-color: #e9eef3;
}
</style>